
<template>
  <div class="m-wrap" v-if="modelShow">
    <div class="mask-model" v-show="mask" :style="{position:limit?'absolute':'fixed'}"></div>
    <Drag ref="drag" :limit="limit" :canDrag="canDrag" v-show="modelShow"  :style="{left:'50%',top: top,transform: translate,zIndex:1001}">
      <div class="model-wrap" :style="{width: width+'px'}">
        <div class="title">{{title}}<i class="el-icon-close" @click="close()"></i></div>
        <div class="cont-wrap" @mousedown.stop>
          <div class="cont">
            <slot></slot>
          </div>
          <div class="footer" v-show="footer">
            <div class="btns">
              <el-button type="primary" v-show="confirmShow" size="small" @click="confirm()">{{confirmText}}</el-button>
              <el-button type="danger" v-show="dangerShow" size="small" @click="danger()">{{dangerText}}</el-button>
              <el-button type="" plain="plain" v-show="cancelShow" size="small" @click="cancel()">{{cancelText}}</el-button>
            </div>
          </div>
        </div>
        <slot name="modelCont"></slot>
      </div>
    </Drag>
  </div>
</template>
<script >

import commonUtils from "@/utils/commonUtils";
import Drag from "@/components/PerCom/drag.vue";
import BcTitle from '@/components/PerCom/bcTitle'
export default {
  name: 'Model',
  components: {
    Drag,
    BcTitle
  },
  props: {
    limit: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '窗口'
    },
    mask: {
      type: Boolean,
      default: true
    },
    top: {
      type: String,
      default: '50%'
    },
    footer: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '600'
    },
    canDrag: { //是否可拖动
      type: Boolean,
      default: false
    },
    confirmShow: {
      type: Boolean,
      default: true
    },
    dangerShow: {
      type: Boolean,
      default: false
    },
    cancelShow: {
      type: Boolean,
      default: true
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    dangerText: {
      type: String,
      default: '删除'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
  },
  data() {
    return {
      id: commonUtils.createHash(),
      translate: 'translate(-50%,-52%)',
      modelShow: false
    }
  },
  methods: {
    show() {
      this.modelShow = true
    },
    close() {
      this.modelShow = false
      this.$emit('handlerClick', 'close')
    },
    confirm() {
      this.$emit('handlerClick', 'confirm')
    },
    danger() {
      this.$emit('handlerClick', 'danger')
    },
    cancel() {
      if (this.cancelClose) {
        this.close()
      }
      this.$emit('handlerClick', 'cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
.mask-model {
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, .2);
}
.model-wrap {
  background: #fff;
  overflow: hidden;
  position: relative;

  .el-icon-close {
    font-weight: bold;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
  }

  .cont {
    min-height: 20px;
    padding: 10px;
    overflow: auto;
  }

  .footer {
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 50px;
  }
}

::v-deep .common-wrap .common-table {
  min-height: 300px !important;
}

.title {
  height: 42px;
  line-height: 42px;
  color: #fff;
  padding: 0 10px 0 18px;
  background: #75bebc;
  font-size: 16px;
  position: relative;

  .el-icon-close {
    position: absolute;
    right: 10px;
    top: 8px;
  }
}




</style>
